<template>
	<view class="pageMy">
		<image class="myBackTop" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/myBackTop.png"
			mode="scaleToFill"></image>
		<view class="user">
			<view class="avatar">
				<image v-if="userInfo.nickname" :src="userInfo.avatar" mode="scaleToFill"></image>
				<image v-else src="" mode="scaleToFill"></image>
			</view>
			<view class="right">
				<view v-if="userInfo.nickname" class="name">{{userInfo.nickname}}</view>
				<button v-else @tap="getUserProfile" data-eventsync="true">游客/注册</button>
				<view class="tip">Hi，欢迎加入体验更多功能</view>
			</view>
		</view>
		<view class="toolList">
			<view class="title">
				常用工具
			</view>
			<!-- <view class="toolItem">
				<view class="left">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/icon3.png"
						mode="scaleToFill"></image>
					<text>添加到桌面</text>
				</view>
				<view class="right">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/iconRight.png"
						mode="scaleToFill"></image>
				</view>
			</view> -->
			<view class="toolItem" @tap="navigateTo('/pages/my/question')">
				<view class="left">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/icon4.png"
						mode="scaleToFill"></image>
					<text>常见疑问</text>
				</view>
				<view class="right">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/iconRight.png"
						mode="scaleToFill"></image>
				</view>
			</view>
			<view class="toolItem" @tap="LogOut">
				<view class="left">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/icon5.png"
						mode="scaleToFill"></image>
					<text>退出登录</text>
				</view>
				<view class="right">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/iconRight.png"
						mode="scaleToFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'
	 import {
		onShow
	} from '@dcloudio/uni-app'

	const {
		proxy
	} = getCurrentInstance()

	const userInfo = ref(uni.getStorageSync("user"))

	const getUserProfile = () => {
		// #ifdef MP-TOUTIAO
		uni.getUserProfile({
			success(user) {
				// console.log("getUserProfile 调用成功：", user);
				uni.login({
					success: async (res) => {
						const data = await proxy.$http("api/user/xcxLogin", {
							code: res.code,
							avatar: user.userInfo.avatarUrl,
							nickname: user.userInfo.nickName,
							type:1,
						})
						if (data.code == 200) {
							uni.setStorageSync("token", data.result.token);
							uni.showToast({
								title: "登录成功",
								icon: 'none'
							})
							getUserInfo()
						}
					}
				});
			},
			fail(err) {
				console.log(err);
			}
		})
		// #endif
		// #ifdef MP-KUAISHOU
		uni.getUserInfo({
			success(user) {
				console.log("getUserProfile 调用成功：", user);
				uni.login({
					success: async (res) => {
						const data = await proxy.$http("api/user/xcxLogin", {
							code: res.code,
							avatar: user.userInfo.avatarUrl,
							nickname: user.userInfo.nickName,
							type:2,
						})
						if (data.code == 200) {
							uni.setStorageSync("token", data.result.token);
							uni.showToast({
								title: "登录成功",
								icon: 'none'
							})
							getUserInfo()
						}
					}
				});
			},
			fail(err) {
				console.log(err);
			}
		})
		// #endif
	}

	//获取个人信息
	const getUserInfo = async () => {
		const res = await proxy.$http("api/user/getUserInfo", {}, "GET")
		if (res.code == 200) {
			uni.setStorageSync("user", res.result);
			userInfo.value = res.result
		}
	}

	// onShow(() => {
	// 	setTimeout(() => {
	// 		const interstitialAd = tt.createInterstitialAd({
	// 			adUnitId: "5vp24kx0llart7r65o"
	// 		});
	// 		setTimeout(() => {
	// 			interstitialAd.show().then(() => {
	// 				console.log("广告显示成功");
	// 			}).catch((err) => {
	// 				console.error("广告组件加载出现问题", err);
	// 			});
	// 		}, 2000);
	// 	}, 2000)
	// })

	// 退出登录
	const LogOut = () => {
		uni.removeStorageSync('user');
		uni.removeStorageSync('token');
		userInfo.value = {}
	}
</script>

<style scoped lang="scss">
	.pageMy {
		width: 750rpx;
		height: 100vh;
		background: linear-gradient(180deg, #BAD6FF 0%, #F6F6F6 30%);
		padding: 0 32rpx;
		box-sizing: border-box;

		.myBackTop {
			position: fixed;
			right: 0;
			top: -50rpx;
			width: 376rpx;
			height: 374rpx;
		}

		.user {
			display: flex;
			align-items: center;
			padding-top: 16rpx;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border: 4rpx solid #fff;
				border-radius: 50%;
				margin-right: 16rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100rpx;
				padding: 6rpx 0;
				box-sizing: border-box;

				.name {
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
				}

				::v-deep button {
					background: none;
					padding: 0;
					line-height: 1;
					text-align: left;
					margin: 0;
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
				}

				::v-deep button::after {
					content: none;
				}

				.tip {
					font-weight: 500;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.6);
				}
			}
		}

		.toolList {
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			margin-top: 32rpx;
			position: relative;
			z-index: 1;
			.title {
				width: 100%;
				height: 84rpx;
				line-height: 84rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #1F1F1F;
			}

			.toolItem {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 104rpx;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 12rpx;
					}

					text {
						font-weight: 500;
						font-size: 28rpx;
						color: #1F1F1F;
					}
				}

				.right {
					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}
</style>